<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <style>
        .zh {
            background-color: #93D1FF;
        }

        th {
            background: #f0f0f0;
            text-align: center;
        }
    </style>
    <script type="text/javascript" th:src="@{/js/require.js}"></script>
    <script type="text/javascript" th:src="@{/js/requireConfig.js}"></script>
    <script type="text/javascript" th:src="@{/js/app/user/home.js}"></script>
</head>
<body>
<div class="layui-fluid" id="user">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" id="seach">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5" action="">
                        <div class="layui-input-inline layui-show-xs-block" style="padding-top: 17px">
                            <input type="text" name="nickName" style="padding: 0px 5px" placeholder="请输入用户名"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block" style="padding-top: 17px">
                            <input type="text" name="stateName" style="padding: 0px 5px" placeholder="请输入角色名"
                                   autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit lay-filter="soso" type="submit">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                    <div class="layui-card-header" style="padding: 0 0">
                        <div class="layui-btn-group">
                            <button @click="show_add()" type="button" class="layui-btn layui-btn-normal layui-btn-sm">
                                <i class="layui-icon layui-icon-add-1"></i>增加
                            </button>
                            <button @click="show_update()" type="button"
                                    class="layui-btn layui-btn-normal layui-btn-sm">
                                <i class="layui-icon layui-icon-edit"></i>修改&nbsp;/&nbsp;授权角色
                            </button>
                        </div>
                        <div class="layui-btn-group">
                            <button @click="deleted()" type="button" class="layui-btn layui-btn-danger layui-btn-sm">
                                <i class="layui-icon layui-icon-delete"></i>删除
                            </button>
                            <button @click="show_xq()" type="button" class="layui-btn layui-btn-sm">
                                <i class="layui-icon layui-icon-list"></i>详情
                            </button>
                        </div>
                        <div class="layui-btn-group">
                            <button @click="referXadmin()" type="button"
                                    class="layui-btn layui-btn-normal layui-btn-sm">
                                <i class="layui-icon layui-icon-refresh-1"></i>刷新
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card" id="list">
                <div class="layui-card-body ">
                    <form class="layui-form" action="">
                        <table class="layui-table" id="tab" lay-size="sm">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>uuid</th>
                                <th>用户名称</th>
                                <th>邮箱</th>
                                <th>手机</th>
                                <th>用户状态</th>
                                <th>用户角色</th>
                                <th>维护时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(ls,i) in list" onclick="sure(this)">
                                <td>{{i+1}}</td>
                                <td>{{ls.uuid}}</td>
                                <td>{{ls.nickName}}</td>
                                <td>
                                    {{ls.emil}}
                                </td>
                                <td>
                                    {{ls.ipone}}
                                </td>
                                <td>
                                    {{ls.statusName}}
                                </td>
                                <td>
                                    {{ls.stateName}}
                                </td>
                                <td>
                                    {{ls.methodTime}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div id="test1"></div>
                    </form>
                </div>
            </div>
            <div class="layui-card" id="add" style="display: none">
                <div class="layui-card-body" >
                    <button type="button" class="layui-btn layui-btn-normal" @click="pre_home()">
                        <i class="layui-icon layui-icon-return"></i>&nbsp;返回
                    </button>
                    <form class="layui-form" action="" style="width: 50%;padding-top: 20px;margin-left: 25%">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="password" name="passWord" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">重复密码<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="password" name="passWord2" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" name="ipone"  required lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="emil"   placeholder="请输入邮箱地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态<i class="icon-re">*</i></label>
                            <div class="layui-input-block" style="padding-top: 5px">
                                <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" @focus="xz_state($event)" name="stateName" required  lay-verify="required" placeholder="请选择角色" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" id="update" style="display: none">
                <div class="layui-card-body" >
                    <button type="button" class="layui-btn layui-btn-normal" @click="pre_home()">
                        <i class="layui-icon layui-icon-return"></i>&nbsp;返回
                    </button>
                    <form class="layui-form" action="" style="width: 50%;padding-top: 20px;margin-left: 25%">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" v-bind:value="th.nickName" name="nickName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">密码<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="password" name="passWord" v-bind:value="th.passWord" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">重复密码<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="password" name="passWord2" v-bind:value="th.passWord" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" name="ipone"  v-bind:value="th.ipone" required lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="emil"  v-bind:value="th.emil"  placeholder="请输入邮箱地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态<i class="icon-re">*</i></label>
                            <div class="layui-input-block" style="padding-top: 5px">
                                <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF" v-if="th.status=='1'">
                                <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF" v-if="th.status=='0'" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色<i class="icon-re">*</i></label>
                            <div class="layui-input-inline">
                                <input type="text" @focus="xz_state($event)" v-bind:value="th.stateName" v-bind:uuid="th.state" name="stateName" required  lay-verify="required" placeholder="请选择角色" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemos">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" id="xq" style="display: none">
                <div class="layui-card-body">
                    <button type="button" class="layui-btn layui-btn-normal" @click="pre_home()">
                        <i class="layui-icon layui-icon-return"></i>&nbsp;返回
                    </button>
                    <table class="layui-table">
                        <tr>
                            <th>用户ID</th>
                            <td>{{th.uuid}}</td>
                            <th>用户名称</th>
                            <td>{{th.nickName}}</td>
                        </tr>
                        <tr>
                            <th>邮箱</th>
                            <td>{{th.emil}}</td>
                            <th>手机</th>
                            <td>{{th.ipone}}</td>
                        </tr>
                        <tr>
                            <th>当前角色</th>
                            <td>{{th.stateName}}</td>
                            <th>当前状态</th>
                            <td>{{th.statusName}}</td>
                        </tr>
                        <tr>
                            <th>更新日期</th>
                            <td>{{th.methodTime}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>